<template>
  <header class="AnswerDetail" tabindex="-1" ref="questionDom">
    <!-- 问答题 -->
    <div class="question-add-body-content-question">
      <div class="question-add-body-content-question-div">
        <span class="question" :style="isQuestionShowStyle">
          <span>问题</span>
          <span class="questionNum">{{ num }}</span>
        </span>
        <i class="el-icon-remove-outline"></i>
      </div>
      <span style="color: red" class="isRequireAnswer" :style="isAnswer">
        *
      </span>
      <el-input
        v-model="mainTitle"
        class="title"
        :disabled="isDisabled"
        :style="inputStyle"
      ></el-input>
      <el-input
        type="textarea"
        v-model="content"
        :rows="7"
        class="content"
        resize="none"
      ></el-input>
    </div>
  </header>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'AnswerDetail',
  data() {
    return {
      content: '',
      isAnswer: '', //是否为必答
      inputStyle: '',
    }
  },
  beforeMount() {
    if (this.isRequired === 0) {
      this.isAnswer = 'display:none'
      this.inputStyle = 'margin-left: 20px'
    } else {
      this.isAnswer = 'display:inline'
    }
  },
  props: {
    //问卷题目标题
    mainTitle: {
      type: String,
    },
    //问卷序号
    num: {
      type: Number,
    },
    //是否能被修改
    isDisabled: {
      type: Boolean,
    },
    //是否显示序号
    isQuestionShowStyle: {
      type: String,
    },
    //是否必答题
    isRequired: {
      type: String,
    },
  },
}
</script>

<style scoped>
.AnswerDetail {
  margin-right: 60px;
  margin-bottom: 40px;
  width: 440px;
  height: 297px;
  border: 2px solid lightgrey;
  border-radius: 5px;
  outline: none;
}

/*
问答题
 */
.question-add-body-content-question {
  width: 434px;
  height: 100%;
  overflow: auto;
  /* width: 440px;
  height: 297px;
  border: 2px solid lightgrey;
  border-radius: 5px; */
  /* display: inline-block; */
  /* line-height: 280px; */
  /* text-align: center; */
  /* margin: autos; */
}

.question-add-body-content-question-div {
  width: 405px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  margin: auto;
  /* border: 1px solid; */
  font-size: 18.5px;
  position: relative;
}
.question-add-body-content-question-div .el-icon-remove-outline {
  color: red;
  font-weight: bold;
  position: absolute;
  right: 1px;
  top: 16px;
}
.question-add-body-content-question .title {
  width: 395px;
  /* margin-left: 20px; */
  margin-bottom: 20px;
  border: 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
  font-size: 15px;
  font-weight: normal;
}
.question-add-body-content-question .content {
  width: 395px;
  margin-left: 20px;
  overflow: auto;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
}
</style>
